<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }

        table {
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table cellspacing="20">
            <tr>
                <th><input type="checkbox" value="全选" id="all"></th>
                <th>产品</th>
                <th>价钱</th>

            </tr>
            <tr>
                <td><input type="checkbox"  class="check"></td>
                <td>iphone</td>
                <td class="price">5000</td>

            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>iwatch</td>
                <td class="price">2000</td>

            </tr>
            <tr>
                <td><input type="checkbox" class="check"></td>
                <td>ipad</td>
                <td class="price">3000</td>

            </tr>
            <tr>
                <td></td>
                <td>总价:</td>
                <td class="total">0元</td>
            </tr>
        </table>
        <input type="button" class="reverse" value="反选">
    </div>

    <script>
        // 作业: 实现总价格的计算
        
        // 1. 如何监听checkbox的变化
        var btnAll = document.querySelector('#all');
        var checkBoxs = document.querySelectorAll('.check');
        var btnReverse = document.querySelector('.reverse');
        var priceAll = document.querySelectorAll('.price');
        var total = document.querySelector('.total');
        var arrAll = [];
        var sum = 0;

        // 循环绑定事件 必须注意:事件内部的i 的问题
        for(var i = 0 ; i < checkBoxs.length ; i++){
            // 1.方法1 把checkbox[i] 当作一个对象,动态给这个对象添加一个属性 index
            checkBoxs[i].index = i;  // 给你盖个章吧
            checkBoxs[i].onclick = function(){

                // 执行函数getArray(通过checked状态充当标识，index用来确定要操作的td的索引)
                getArray(this.checked, this.index);
                sum = sumAll(arrAll);
                total.innerHTML = sum;
                
                // 验证是否需要全选
                checkAll();

            }
        }

        /**
        * 用于检测 是否使最后一个被选中的
        **/
        function checkAll(){
            // 假如全部都被选中的 标识
            var flag = true;
            for(var i = 0 ; i < checkBoxs.length ; i ++){
                if(!checkBoxs[i].checked){
                    flag = false;
                    break;
                }
            }
            // 说明没有未选中状态
            if(flag){
                btnAll.checked = 'checked';
            }else{
                // btnAll.removeAttribute('checked');
                btnAll.checked = '';
                // console.log('...')
            }

        }
        btnAll.onclick = function(){
            for(var i = 0 ; i < checkBoxs.length ; i ++){
                checkBoxs[i].checked = this.checked;

                getArray(checkBoxs[i].checked, i);
            }
            sum = sumAll(arrAll);
            total.innerHTML = sum;
        }

        btnReverse.onclick = function(){
            for(var i = 0 ; i < checkBoxs.length ; i ++){
                checkBoxs[i].checked = !checkBoxs[i].checked;
                
                getArray(checkBoxs[i].checked, i);
            }
            
            sum = sumAll(arrAll);
            total.innerHTML = sum;
            checkAll();
        }

        // 在求和数组中移除或添加价格
        // flag 接受传来的checked值， index接受传来的要操作的td的索引
        function getArray(flag, index) {
            var price = Number(priceAll[index].innerHTML);

            // 如果checked为真，则将要操作的  td的值  放入  求和数组
            if (flag) {
                // 数组中存在不用放入
                if (arrAll.indexOf(price) === -1) {
                    arrAll.push(price);
                }
            } else {
            // 否则根据td的值 找到它在求和数组arrAll中的索引  再删除它
                var arrIndex = arrAll.indexOf(price);
                arrAll.splice(arrIndex, 1);
            }
        }
        
        // 求和数组 去重并求和 
        function sumAll(arr) {
            var sumInner = 0;
            // 求和前将  和变量置空
            sum = 0;
            for (var j = 0; j < arr.length; j++) {
                sumInner += arr[j];
            }
            
            console.log(arr);
            return sumInner;
        }
    </script>
</body>

</html>